<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id="container">
  <div id="target"></div>
</div>
<script>
target.style.fontSize = '140px';

function assertAnimationValues(keyword, states) {
  test(() => {
    var animation = target.animate({fontSize: keyword}, 1);
    for ({inheritedValue, expectations} of states) {
      container.style.fontSize = inheritedValue;
      for ({at, is} of expectations) {
        animation.currentTime = at;
        assert_equals(getComputedStyle(target).fontSize, is, `Animating font-size from [${target.style.fontSize}] to [${keyword}] with inherited value [${inheritedValue}] at (${at}) is [${is}]`);
      }
    }
    animation.cancel();
  }, `Animating {font-size: '${keyword}'} should be responsive to changes in the inherited font-size.`);
}

assertAnimationValues('inherit', [{
  inheritedValue: '100px',
  expectations: [
    {at: 0.25, is: '130px'},
    {at: 0.75, is: '110px'},
  ],
}, {
  inheritedValue: '200px',
  expectations: [
    {at: 0.25, is: '155px'},
    {at: 0.75, is: '185px'},
  ],
}]);

assertAnimationValues('larger', [{
  inheritedValue: '100px',
  expectations: [
    {at: 0.25, is: '135px'},
    {at: 0.75, is: '125px'},
  ],
}, {
  inheritedValue: '200px',
  expectations: [
    {at: 0.25, is: '165px'},
    {at: 0.75, is: '215px'},
  ],
}]);

assertAnimationValues('smaller', [{
  inheritedValue: '120px',
  expectations: [
    {at: 0.25, is: '130px'},
    {at: 0.75, is: '110px'},
  ],
}, {
  inheritedValue: '240px',
  expectations: [
    {at: 0.25, is: '155px'},
    {at: 0.75, is: '185px'},
  ],
}]);
</script>
